<template>
  <div class="list">
    <LoginButton v-for="(item, index) in platformListInfo" :key="index" :platformInfo="item" />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import QQ from '/login/QQ.png';
import wangyiyun from '/login/wangyiyun.png';
import kugou from '/login/kugou.png';

const platformListInfo = reactive([
  {
    iconSrc: QQ,
    state: '未登录',
    platform: 'QQ音乐',
  },
  {
    iconSrc: wangyiyun,
    state: '未登录',
    platform: '网易云音乐',
  },
  {
    iconSrc: kugou,
    state: '未登录',
    platform: '酷狗音乐',
  },
]);
</script>

<style scoped lang="scss">
.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
